let arrFen = [
  { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
  { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
  { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
  { btn1: '一级分类', btn2: '二级分类', btn3: '三级分类' },
]
let arrXia=[
  {
    btn4:'颜色'
  },
  {
    btn4:'尺寸'
  },
  {
    btn4:'尺码'
  },{
    btn4:'规格'
  },
  {
    btn4:'型号'
  },{
    btn4:'系列'
  },{
    btn4:'口味'
  },{
    btn4:'性别'
  },{
    btn4:'款式'
  },{
    btn4:'版本'
  },
]
function btnF() {

  $('.content').css({ 'display': 'block' })
}
function fenlei(data) {
  $.each(data, (index, item) => {
    $('.one').append(`
    <li class="yi"><span>${item.btn1}<span class="iconfont icon-youjiantou"></span>
      </span></li>
   `)
    $('.two').append(`
    <li class="er"><span>${item.btn2}<span class="iconfont icon-youjiantou"></span>
      </span></li>
   `)
    $('.three').append(`
    <li class="san"><span>${item.btn3}
      </span></li>
   `)
  })
}
fenlei(arrFen)
$('.one').on('click', '.yi', function () {
  $('.two').find('li:last-child').css('visibility', 'hidden')
  $('.two').css({ "display": 'block', "left": '190px' })
  for (let i = 0; i < $('.yi').length; i++) {
    $('.yi').eq(i).css({ "background-color": "#FFFFFF", })
    $('.yi').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })
  }
  $(this).css({ "background-color": "#F5F7FA", })
  $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
})
$('.two').on('click', '.er', function () {


  for (let i = 0; i < $('.er').length; i++) {
    $('.er').eq(i).css({ "background-color": "#FFFFFF", })
    $('.er').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })

  }
  $(this).css({ "background-color": "#F5F7FA", })
  $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
  $('.three').css({ "display": 'block', "left": '380px' })
})
$(".three").on('click', '.san', function () {

  for (let i = 0; i < $('.san').length; i++) {
    $('.san').eq(i).css({ "background-color": "#FFFFFF", })
    $('.san').eq(i).find("span").css({ "color": "#454545", "font-weight": "200" })

  }
  $(this).css({ "background-color": "#F5F7FA", })
  $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
  $($(this).parent().parent()[0]).css('display', 'none')


})

// 下拉列表
function arrX(data) {

  $('.content1').css({ 'display': 'block' })
}
function xiala(data) {
  $.each(data, (index, item) => {
    $('.four').append(`
    <li class="si"><span>${item.btn4}</span></li>
   `)
  })
}
xiala(arrXia)
$('.si').on('click', function () {
  $(this).css({ "background-color": "#F5F7FA", })
  $(this).find("span").css({ "color": "#409EFE", "font-weight": "900" })
})